<script>
import {
  defineComponent,
  ref,
  unref,
  computed,
  reactive,
  onMounted,
  createVNode,
  h,
} from "vue";
import {
  Button,
  Input,
  Space,
  Divider,
  RadioGroup,
  RadioButton,
  Tooltip,
  Form,
  FormItem,
  message,
  Spin,
  Modal,
} from "ant-design-vue";
import { useRoute } from "vue-router";
import {
  QuestionCircleOutlined,
  CheckCircleOutlined,
  CloseCircleOutlined,
} from "@ant-design/icons-vue";
import draggable from "vuedraggable";

import * as pdfjsLib from "pdfjs-dist/build/pdf"; // 确保导入了 pdfjs-dist
import pdfWorker from "pdfjs-dist/build/pdf.worker.entry";

import { getWindowHeight, base64ToBlob, saveBlob } from "@/utils";
import { doGet, doPost } from "@/utils/request";

// import LayoutHeader from "@/layouts/header/index.vue"
import flexible from "@/utils/flexible.js";
import {
  CanvasZoom,
  controlList,
  ControlType,
} from "@/components/control/data/ControlData";
import {
  moveRange,
  currentPosition,
} from "@/components/control/data/ControlerMoveRange";
import ControlItem from "@/components/control/ControlItem.vue";

import SealModal from "./SealModal.vue";
import SignatureModal from "./SignatureModal.vue";

import image1 from "@/assets/images/doc_1.png";
import image2 from "@/assets/images/doc_2.png";

import "@/assets/style/main.less";

export default defineComponent({
  name: "mian",
  components: {
    Button,
    Input,
    Divider,
    RadioGroup,
    RadioButton,
    Space,
    Tooltip,
    Form,
    FormItem,
    Modal,
    CloseCircleOutlined,
    QuestionCircleOutlined,
    draggable,
    ControlItem,
    SealModal,
    SignatureModal,
    Spin,
    CheckCircleOutlined,
  },
  setup() {
    const route = useRoute();
    const pdfUrl = ref();
    const baseFilePath = ref();
    const filePath = ref();
    //copy 控件防止修改了初始化控件的属性
    const thisControlList = ref(JSON.parse(JSON.stringify(controlList)));

    const keywordFromRef = ref();
    const type = ref("");

    const spinning = ref(false);
    //签署相关的属性
    const signData = ref({
      signType: 1,
      pageSize: 0,
      entKeyword: "响应人：",
      legalKeyword: "法定代表人或其委托代理人：",
      personalKeyword: "",
      entName: "",
      personalName: "",
      entSeal: "",
      legalPersonalSeal: "",
      personalSeal: "",
      entPositionList: [],
      legalPersonPositionList: [],
      personalPositionList: [],
      projectId: "",
      entType:0,
      type: "",
      entId: "",
    });
    //文档展示的数据  包含控件列表
    const documentPDF = ref({
      images: [
        {
          docPage: 0,
          image: image1,
        },
        {
          docPage: 1,
          image: image2,
        },
      ],
      pages: [],
      control: [],
    });
    //控件移出移入的配置
    const groupOut = ref({
      name: "itxst",
      put: false,
      pull: "clone", //允许拖出
    });
    const groupEnter = ref({
      name: "itxst",
      put: true, //允许拖入
      pull: false, //允许拖出
    });
    const attachmentId = ref();

    const loadPDF = async () => {
      try {
        //调用获取文件接口
        const res = await doPost("/getiBusiAttachment", {
          projectId: route.query.project,
          entId: route.query.entId,
          type: route.query.type,
        });
        if (res.code == 200) {
          // 获取回退参数
          attachmentId.value = res.data.attachmentID;
          // 获取企业签章
          signData.value.entSeal = res.data.entInfo.enterpriseSignature;
          signData.value.legalPersonalSeal =
            res.data.entInfo.legalRepreSignature;
          signData.value.entType=res.data.entInfo.entType;

          thisControlList.value.map((element) => {
            if (element.type == ControlType.Seal) {
              element.value = res.data.entInfo.enterpriseSignature;
            } else if (element.type == ControlType.legalPerson) {
              element.value = res.data.entInfo.legalRepreSignature;
            }
          });
          // 获取文件
          filePath.value = "/kaifangqian" + res.data.filePath;
          baseFilePath.value = "/kaifangqian" + res.data.baseFilePath;
          // filePath.value =  res.data.filePath;
          // baseFilePath.value =  res.data.baseFilePath;

          pdfUrl.value = filePath.value;
          signData.value.entName = res.data.entInfo.entName;
          // 初始化 pdfjsLib 的 worker
          pdfjsLib.GlobalWorkerOptions.workerSrc = pdfWorker;

          const loadingTask = pdfjsLib.getDocument(pdfUrl.value);

          const pdf = await loadingTask.promise;

          // 获取 PDF 的所有页面
          documentPDF.value.pages = Array.from(
            { length: pdf.numPages },
            (_, i) => ({ docPage: i })
          );

          // // 渲染每一页
          for (let pageNum = 1; pageNum <= pdf.numPages; pageNum++) {
            const page = await pdf.getPage(pageNum);
            const canvas = document.getElementById(`pdf-canvas-${pageNum - 1}`);
            const context = canvas.getContext("2d");

            const viewport = page.getViewport({ scale: 1.34 });
            canvas.height = viewport.height;
            canvas.width = viewport.width;

            const renderContext = {
              canvasContext: context,
              viewport: viewport,
            };
            await page.render(renderContext).promise;
          }
        }
      } catch (error) {
        console.error("Error loading PDF:", error);
      }
    };
    // 删除控制项的示例方法
    // const controlDelete = (element) => {
    //   // 删除控制项的代码逻辑
    //   console.log("Delete control:", element);
    // };

    //深度克隆控件对象
    function clone(origin) {
      const data = JSON.parse(JSON.stringify(origin));
      data.position.x = 100;
      data.position.y = 100;
      data.uid = parseInt(
        new Date().getMilliseconds() + "" + Math.ceil(Math.random() * 100000)
      ).toString(16);
      data.pageSize = documentPDF.value.pages.length;
      return data;
    }
    //控件完成拖动触发事件
    function controlsDragOver(e) {
      const moveTarget = documentPDF.value.control[e.newIndex];

      if (e.pullMode) {
        const opt = {
          x: e.originalEvent.offsetX - moveTarget.size.width / 2,
          y: e.originalEvent.offsetY - moveTarget.size.height / 2,
          pageSize: documentPDF.value.pages.length,
          size: moveTarget.size,
          currentPage: 0,
        };
        moveRange(opt);
        moveTarget.position.left = opt.x;
        moveTarget.position.top = opt.y;
        moveTarget.position.page = opt.currentPage;
        moveTarget.controlClick = true;
      }
    }

    //制作印章弹窗的开关
    const sealModalShow = ref(false);

    //设置签名的弹窗开关
    const signatureModalShow = ref(false);

    //删除已拖动至文档中的控件
    function controlDelete(element) {
      documentPDF.value.control = documentPDF.value.control.filter((item) => {
        return item.uid !== element.uid;
      });
    }
    /**
     * 接受签章图片
     */
    function sealModalSubmit(data) {
      var temControlList = JSON.parse(JSON.stringify(thisControlList.value));
      if (data.type == ControlType.Seal) {
        temControlList[0].value = data.sealImage;
        temControlList[0].user.userName = data.entpName;
        signData.value.entName = data.entpName;
        signData.value.entSeal = data.sealImage;
      } else if (data.type == ControlType.legalPerson) {
        temControlList[1].value = data.sealImage;
        temControlList[1].user.userName = data.entpName;
        signData.value.legalName = data.entpName;
        signData.value.legalSeal = data.sealImage;
      }

      thisControlList.value = temControlList;
      //替换控件中已经使用的签章
      documentPDF.value.control.forEach((item) => {
        if (item.type == ControlType.Seal) {
          item.value = data.sealImage;
        } else if (item.type == ControlType.legalPerson) {
          item.value = data.sealImage;
        }
      });
    }
    /**
     * 接收手写签名图片
     */
    function signatureModalSubmit(data) {
      var temControlList = JSON.parse(JSON.stringify(thisControlList.value));
      temControlList[1].value = data.image;
      temControlList[1].user.userName = data.userName;
      signData.value.personalName = data.userName;
      signData.value.personalSeal = data.image;
      thisControlList.value = temControlList;
      //替换控件中已经使用的手写签名
      documentPDF.value.control.forEach((item) => {
        if (item.type == ControlType.Signature) {
          item.value = data.image;
        }
      });
    }

    /**
     * 判断控件的class  是否可进行拖动
     */
    function controlClass(element) {
      if (
        element.type == ControlType.Seal &&
        (signData.value.signType == 1 || signData.value.signType == 3) &&
        thisControlList.value[0].value
      ) {
        return "control-move";
      } else if (
        element.type == ControlType.legalPerson &&
        (signData.value.signType == 1 || signData.value.signType == 3) &&
        thisControlList.value[1].value
      ) {
        return "control-move";
      } else if (
        element.type == ControlType.Signature &&
        (signData.value.signType == 1 || signData.value.signType == 3) &&
        thisControlList.value[1].value
      ) {
        return "control-move";
      } else {
        return "control-disabled";
      }
      //return  "control-move";
    }

    /**
     * 签署类型切换
     */
    function signTypeChange(val) {
      if (signData.value.signType == 2) {
        documentPDF.value.control = [];
      }
    }
    /**
     * 调用文件签署接口进行签署  并返回签署后的PDF文件
     */
    function signDocument() {
      // signSuccessTips();
      if (
        signData.value.signType == 1 &&
        documentPDF.value.control.length == 0
      ) {
        message.warning(
          "您尚未为电子印章/手写签名指定签署位置，请设置后再签署"
        );
        return;
      }
      // console.log(signData.value.signType == 2 && (!signData.value.entKeyword  || !signData.value.personalKeyword));
      //判断如果是关键字签署类型  必须设置一个关键字
      if (
        signData.value.signType == 2 &&
        !(
          signData.value.entKeyword ||
          signData.value.personalKeyword ||
          signData.value.legalKeyword
        )
      ) {
        message.warning("您尚未设置关键字，请准确设置关键字后再签署");
        return;
      }
      //如果设置了企业印章关键字 必须设置印章才能提交
      if (
        signData.value.signType == 2 &&
        signData.value.entKeyword &&
        !signData.value.entSeal
      ) {
        message.warning("尚未制作企业印章，请先制作电子印章后再签署");
        return;
      }
      //如果设置了法人印章关键字 必须设置印章才能提交
      if (
        signData.value.signType == 2 &&
        signData.value.legalKeyword &&
        !signData.value.legalPersonalSeal
      ) {
        message.warning("尚未制作法人印章，请先制作电子印章后再签署");
        return;
      }
      //如果设置了手写前面关键字 必须设置签名才能提交
      if (
        signData.value.signType == 2 &&
        signData.value.personalKeyword &&
        !signData.value.personalSeal
      ) {
        message.warning("尚未设置手写签名，请先设置手写签名后再签署");
        return;
      }
      if (
        signData.value.signType == 3 &&
        documentPDF.value.control.length == 0
      ) {
        message.warning(
          "您尚未为电子印章/手写签名指定签署位置，请设置后再签署"
        );
        return;
      }
      spinning.value = true;
      signData.value.entPositionList = [];
      signData.value.personalPositionList = [];
      signData.value.pageSize = documentPDF.value.pages.length;
      // signData.value.
      //将签名控件的位置转换为签署所需的坐标
      documentPDF.value.control.forEach((item) => {
        const temItem = {
          width: item.size.width,
          height: item.size.height,
          offsetX: item.position.left,
          offsetY: currentPosition(item.position.top, item.position.page),
          page: item.position.page + 1,
          pageHeight: CanvasZoom.height,
          pageWidth: CanvasZoom.width,
        };
        if (item.type == ControlType.Seal) {
          signData.value.entPositionList.push(temItem);
        } else if (item.type == ControlType.legalPerson) {
          signData.value.legalPersonPositionList.push(temItem);
        } else if (item.type == ControlType.Signature) {
          signData.value.personalPositionList.push(temItem);
        }
      });
      signData.value.projectId = route.query.project;
      signData.value.type = route.query.type;
      signData.value.entId = route.query.entId;
      //调用签署接口
      doPost("/sign", signData.value).then((res) => {
        console.log("sign res:", res);

        if (res.code == 200) {
          loadPDF();
          // 删除文件上的签章控件
          documentPDF.value.control.map((element) => {
            controlDelete(element);
          });
          successVisible.value = true;
        } else {
          errorMsg.value = res.message;
          errorVisible.value = true;
        }
        spinning.value = false;
      });
    }
    const successVisible = ref(false);
    const errorVisible = ref(false);
    const errorMsg = ref("");

    /**
     *
     * 如果没有设置签名图片 打开相关的弹窗
     * @param {Object} element
     */
    function openModal(element) {
      if (element.type == ControlType.Seal && !element.value) {
        //signData.value.entPositionList.push(temItem)
        type.value = ControlType.Seal;
        sealModalShow.value = !sealModalShow.value;
      } else if (element.type == ControlType.legalPerson && !element.value) {
        //signData.value.personalPositionList.push(temItem)
        type.value = ControlType.legalPerson;
        signatureModalShow.value = !signatureModalShow.value;
      } else if (element.type == ControlType.Signature && !element.value) {
        //signData.value.personalPositionList.push(temItem)
        signatureModalShow.value = !signatureModalShow.value;
      }
    }
    /**
     * 回退文件
     */
    function fallback() {
      doGet(
        `/resetBiddingDocuments/${attachmentId.value}/${route.query.type}`
      ).then((res) => {
        if (res.code == 200) {
          loadPDF();
        } else {
          errorMsg.value = res.message;
        }
      });
    }

    /**
     * 重置页面
     */
    function reloadPage() {
      window.location.reload();
    }

    /**
     * 跳转 外部链接
     * @param {Object} path 路径
     */
    function jumpExternal(path) {
      window.open(path, "_blank");
    }

    /**
     * 获取文件图片列表
     */
    function getImageList() {
      const list = [
        {
          docPage: 0,
          image: image1,
        },
        {
          docPage: 1,
          image: image2,
        },
      ];
      documentPDF.value.images = list;
      documentPDF.value.control = [];
    }
    onMounted(() => {
      loadPDF(); // 替换为你的 PDF 文件路径
      getImageList();
    });

    // 下载签署后的文件
    function downloadDocument() {
      // 创建一个临时的<a>标签
      const a = document.createElement('a');
      a.href = filePath.value;
      a.target = "_blank";
      // 触发点击事件以下载文件
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
    };


    return {
      getWindowHeight,
      signData,
      documentPDF,
      CanvasZoom,
      thisControlList,
      clone,
      groupOut,
      groupEnter,
      controlsDragOver,
      controlDelete,
      sealModalShow,
      sealModalSubmit,
      signatureModalSubmit,
      signatureModalShow,
      signDocument,
      controlClass,
      openModal,
      ControlType,
      signTypeChange,
      keywordFromRef,
      type,
      fallback,
      reloadPage,
      jumpExternal,
      spinning,
      successVisible,
      errorVisible,
      errorMsg,
      CloseCircleOutlined,
      downloadDocument,
    };
  },
});
</script>


<template>
  <Spin :spinning="spinning" tip="签署中" :delay="100" style="max-height: 100%;">
    <div class="layout-main" :style="'height:'+getWindowHeight()+'px'">
      <div class="layout-header">
        <ul class="header-menu">
          <!-- logo -->
          <li class="header-logo">
            <!-- <img src="../assets/images/kaifangqian-logo.png"/> -->
          </li>
          <!-- 操作按钮 -->
          <li class="header-btn">
            <Space :size="40">
              <Button size="large" class="custom-ant-button" @click="fallback">回退文件</Button>
              <Button size="large" class="custom-ant-button" @click="reloadPage">重置</Button>
              <!-- <Button type="primary" size="large" class="custom-ant-button" @click="sealModalShow = !sealModalShow">印章制作</Button> -->
              <!-- <Button type="primary" size="large" class="custom-ant-button" @click="signatureModalShow = !signatureModalShow">手写签名</Button> -->
              <Button type="primary" size="large" class="custom-ant-button" @click="signDocument">签署</Button>
              <Button type="primary" size="large" class="custom-ant-button" @click="downloadDocument">在线查看</Button>
            </Space>
          </li>
          <!-- 外部链接 -->
          <li class="header-external">
            <Space :size="40">
              <!-- <Button type="primary" size="large" class="custom-ant-button" @click="jumpExternal('https://www.kaifangqian.com/#/verification')">文件验签</Button> -->
              <!-- <Button type="primary" size="large" class="custom-ant-button" @click="jumpExternal('https://www.kaifangqian.com')">了解“开放签”</Button> -->
            </Space>
          </li>
        </ul>
      </div>
      <div class="layout-body">
        <div class="sign-configure">
          <h3>签署配置</h3>
          <div class="sign-mode">
            <div class="configure-title">
              <span>签署方</span>
            </div>
            <RadioGroup v-model:value="signData.signType" @change="signTypeChange">
              <RadioButton :value="1">指定位置签署</RadioButton>
              <RadioButton :value="2">关键字签署</RadioButton>
              <RadioButton :value="3">全文件签署</RadioButton>
            </RadioGroup>
            <div class="mode-location" v-if="signData.signType == 1">
              <span>签署方式选择“指定位置签署”时，可拖拽“电子印章”和“手写签名”至右侧的文档中，指定对应的签署位置；</span>
            </div>
            <div class="mode-keyword" v-if="signData.signType == 2">
              <ul>
                <Form :model="signData" name="basic" aut="off" ref="keywordFromRef" class="keyword-from">
                  <li class="li-style">企业印章-关键字设置<Button type="link" @click="signData.entKeyword='响应人：'">默认关键字</Button></li>
                  <li>
                    <FormItem name="entKeyword" :rules="[{ required: false, message: '企业印章-关键字', trigger: 'change' }]">
                      <Input v-model:value="signData.entKeyword" placeholder="请输入企业印章签署在文件中的关键字" class="input-width" />
                    </FormItem>
                  </li>
                  <li class="li-style">法人印章-关键字设置<Button type="link" @click="signData.legalKeyword='法定代表人或其委托代理人：'">默认关键字</Button></li>
                  <li>
                    <FormItem name="legalKeyword" :rules="[{ required: false, message: '法人印章-关键字', trigger: 'change' }]">
                      <Input v-model:value="signData.legalKeyword" placeholder="请输入电子印章签署在文件中的关键字" class="input-width" />
                    </FormItem>
                  </li>
                  <!-- <li class="li-style">手写签名-关键字设置<Button
                      type="link"
                      @click="signData.personalKeyword = '个人手写签名处'"
                    >默认关键字</Button></li>
                  <li>
                    <FormItem
                      name="personalKeyword"
                      :rules="[{ required: false, message: '电子印章-关键字',  trigger: 'change'}]"
                    >
                      <Input
                        v-model:value="signData.personalKeyword"
                        placeholder="请输入手写前面签署在文件中的关键字"
                        class="input-width"
                      />
                    </FormItem>
                  </li> -->
                </Form>
              </ul>
            </div>
            <div class="mode-location" v-if="signData.signType == 3">
              <span>签署方式选择“全文件签署”时，可拖拽“电子印章”和“手写签名”至右侧的文档中，指定对应的签署位置；</span>
            </div>
          </div>
          <div class="sign-signer">
            <div class="configure-title">
              <span>签署方</span>
            </div>
            <div class="signer-list">
              <ul>
                <draggable :list="thisControlList" handle=".control-move" filter=".unmover" item-key="name" :force-fallback="true" animation="300" @end="controlsDragOver" :group="groupOut" :fallback-class="true" :fallback-on-body="true" :touch-start-threshold="50" :fallback-tolerance="50" :clone="clone" :sort="false" drag-class="drag-class">
                  <template #item="{ element }">
                    <div>
                      <li class="unmover li-style" v-if="element.type == ControlType.Seal">企业印章-{{element.user.userName?element.user.userName:''}}</li>
                      <li class="unmover li-style" v-if="element.type == ControlType.legalPerson">法人印章-{{element.user.userName?element.user.userName:''}}</li>
                      <!-- <li
                        class="unmover li-style"
                        v-if="element.type== ControlType.Signature"
                      >手写签名-{{element.user.userName?element.user.userName:'未手写签名'}}</li> -->
                      <li :class="['li-entp-seal',controlClass(element)]">
                        <div class="entp-seal item" v-if="element.type== ControlType.Seal">
                          <img :src="'data:image/png;base64,'+element.value" v-if="element.value" />
                          <span v-else>请先制作印章</span>
                        </div>
                        <div class="legalPerson-seal item" v-if="element.type== ControlType.legalPerson">
                          <img :src="'data:image/png;base64,'+element.value" v-if="element.value" />
                          <span v-else>请先制作印章</span>
                        </div>
                        <!-- <div
                          class="person-seal item"
                          v-if="element.type== ControlType.Signature"
                          @click="openModal(element)"
                        >
                          <img
                            :src="'data:image/png;base64,'+element.value"
                            v-if="element.value"
                          />
                          <span v-else>请先设置手写签名</span>
                        </div> -->
                      </li>
                    </div>
                  </template>
                </draggable>
              </ul>
            </div>
          </div>
        </div>
        <div class="sign-content">
          <c-scrollbar>
            <div class="document-content">
              <div class="document-list" :style="[
							'height: '+ (CanvasZoom.height * documentPDF.pages.length + documentPDF.pages.length * 16) +'px;'
						]" v-if="documentPDF && documentPDF.pages">
                <template v-for="(page, index) in documentPDF.pages" :key="index">

                  <div class="document-page group" v-if="page" :style="'transform: translate(0,'+(index * CanvasZoom.height + (page.docPage+1) * 16)+'px);'">
                    <canvas :id="'pdf-canvas-' + index" style="width: 100%;"></canvas>
                  </div>
                </template>
                <draggable :list="documentPDF.control" ghost-class="ghost" draggable=".test" item-key="uid" :group="groupEnter" :force-fallback="true" chosen-class="chosenClass" animation="300" :fallback-class="true" :fallback-on-body="true" :touch-start-threshold="50" :fallback-tolerance="50" style="width: 100%;height: 100%;position: relative;">
                  <template #item="{ element }">
                    <ControlItem :doc="documentPDF.control" :element="element" :isSign="false" @controlDelete="controlDelete" />
                  </template>
                </draggable>
              </div>
            </div>
          </c-scrollbar>
        </div>
        <div class="sign-description">
          <c-scrollbar>
            <div class="description-scrollbar">
              <h3>操作说明</h3>
              <ul>
                <!-- <li class="description-title">生成数字证书</li>
								<li class="description-text">该系统内置了用于演示的数字证书，关于数字证书的介绍，可参考《<a href="https://www.yuque.com/huxin-ch41t/kaifangqian/ni7eglg3by4wgm7v" target="_blank">数字证书</a>》</li>
								<Divider style="border-color: #bbb;margin: 10px 0;"/> -->
                <li class="description-title">制作电子印章</li>
                <li class="description-text">请在限额以下交易平台个人中心上传公司及法定代表人电子印章</li>
                <!-- <li class="description-text">点击【手写签名】按钮，按照提示信息生成手写签名</li> -->
                <Divider style="border-color: #bbb;margin: 10px 0;" />
                <li class="description-title">选择签署方式</li>
                <li class="description-text">本系统提供了三种签署方式：</li>
                <li class="description-text" style="padding-top: 0.1rem;line-height: 22px;">（1）指定位置签署：将电子印章/手写签名拖拽到文件页面的某一位置，签署时，系统会将电子印章/手写签名加盖到文件的对应位置；</li>
                <li class="description-text" style="padding-top: 0.1rem;line-height: 22px;">（2）关键字签署：输入电子印章/手写签名需要加盖到文件上的关键字，签署时，系统会在文档中查找对应关键字的位置，并加盖电子印章/手写签名；</li>
                <li class="description-text" style="padding-top: 0.1rem;line-height: 22px;">（3）全文件签署：输入电子印章/手写签名拖拽到文件页面的某一位置，签署时，系统会将电子印章/手写签名加盖到文件全部页面的对应位置；</li>
                <Divider style="border-color: #bbb;margin: 10px 0;" />
                <li class="description-title">文件签署</li>
                <li class="description-text">点击【签署】按钮，进行文件签署</li>
                <li class="description-text">点击【重置】按钮，清除当前文件上未签署的电子印章</li>
                <li class="description-text">点击【回退文件】按钮，将文件回退至未签章状态</li>
                <Divider style="border-color: #bbb;margin: 10px 0;" />
                <li class="description-title">签署文件验证</li>
                <li class="description-text">验证的两种方式：</li>
                <li class="description-text" style="padding-top: 0.1rem;line-height: 22px;">（1）下载自行验证：签署完成后，可下载签署后的文件，使用adobe等软件验证文件电子签章信息；</li>
                <li class="description-text" style="padding-top: 0.1rem;line-height: 22px;">（2）在平台验证：签署完成后，可下载签署后的文件，点击导航栏的【文档验签】按钮，进入到“开放签”官网进行验签</li>

                <!-- <Divider style="border-color: #bbb;margin: 10px 0;"/>
								<li class="description-text font-red">注意</li>
								<li class="description-text font-red">该演示系统仅是为了帮助您更好的了解电子签章相关的操作，签署的文件不具备法律效力，同时对于该演示系统签署的任何文件所产生的法律问题，我方不承担任何后果！</li> -->
              </ul>
            </div>
          </c-scrollbar>
        </div>
      </div>
    </div>
  </Spin>
  <SealModal :modalVisible="sealModalShow" @success="sealModalSubmit" />
  <SignatureModal :modalVisible="signatureModalShow" @success="signatureModalSubmit" />
  <Modal v-model:visible="successVisible" @ok="handleOk" cancelText="关闭" :footer="null">
    <div class="modal-title">
      <Space :size="10">
        <CheckCircleOutlined style="color: #52c41a;" />
        <span>文档签署成功</span>
      </Space>
    </div>
    <div class="modal-body">
      <!-- 根据entType判断显示不同提示语 -->
      <template v-if="signData.entType == 3">
        <p>下一步请返回上级页面，制作和下载加密响应文件</p>
        <p>如需留存未加密的响应文件，点击本页面“在线查看”进行预览留存</p>
      </template>
      <template v-else>
        <p>下一步请返回“采购公告信息”页面，点击“发布”该项目</p>
      </template>
    </div>
    <div class="modal-footer">
      <Button @click="successVisible = false" type="primary">关闭</Button>
    </div>
  </Modal>
  <Modal v-model:visible="errorVisible" @ok="handleOk" cancelText="关闭" :footer="null">
    <div class="modal-title">
      <Space :size="10">
        <CloseCircleOutlined style="color: #ff4d4f;" />
        <span>文档签署失败</span>
      </Space>
    </div>
    <div class="modal-body">
      <p>{{errorMsg}}</p>
    </div>
    <div class="modal-footer">
      <Button @click="errorVisible = false" type="primary">关闭</Button>
    </div>
  </Modal>

</template>


<style>
.keyword-from .ant-form-item {
  margin-bottom: 0 !important;
}
.modal-title {
  font-size: 16px;
  /* font-weight: 600; */
}
.modal-body {
  padding-top: 20px;
  padding-left: 20px;
}
.modal-footer {
  text-align: right;
  padding-right: 20px;
}
</style>
